<template>
  <div class="question-manager">
    <!-- 操作模式切换 -->
    <div class="operation-mode">
      <el-radio-group v-model="activeOperation" size="large">
        <el-radio-button label="单个添加" />
        <el-radio-button label="批量导入" />
        <el-radio-button label="智能导入" />
      </el-radio-group>
    </div>

    <!-- 单个添加模块 -->
    <div v-show="activeOperation === '单个添加'" class="single-add">
      <!-- 试题类型选择 -->
      <div class="type-selector">
        <el-radio-group v-model="questionType">
          <el-radio-button label="选择题" />
          <el-radio-button label="判断题" />
          <el-radio-button label="填空题" />
          <el-radio-button label="简答题" />
          <el-radio-button label="编程题" />
          <el-radio-button label="程序填空题" />
        </el-radio-group>
      </div>

      <!-- 元数据表单 -->
      <el-form label-position="top" class="metadata-form">
        <el-row :gutter="20">
          <!-- 知识点层级选择 -->
          <el-col :span="8">
            <el-form-item label="知识点选择">
              <el-cascader
                v-model="form.knowledgePath"
                :options="knowledgeOptions"
                :props="{ multiple: true }"
                placeholder="请选择书本章节"
                clearable
              />
            </el-form-item>
          </el-col>

          <!-- 难度选择 -->
          <el-col :span="8">
            <el-form-item label="难度设置">
              <el-select v-model="form.difficulty">
                <el-option label="简单" value="easy" />
                <el-option label="适中" value="medium" />
                <el-option label="困难" value="hard" />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 存储目录 -->
          <el-col :span="8">
            <el-form-item label="存储位置">
              <el-select v-model="form.folder">
                <el-option label="根目录" value="root" />
                <el-option label="章节练习" value="chapter" />
                <el-option label="模拟试题" value="simulation" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 题干编辑区 -->
      <div class="stem-editor">
        <el-input
          v-model="form.stem"
          type="textarea"
          :rows="4"
          placeholder="请输入题目内容（支持Markdown语法）"
        />
      </div>

      <!-- 动态答案区 -->
      <div class="answer-section">
        <template v-if="questionType === '选择题'">
          <div
            v-for="(option, index) in form.options"
            :key="index"
            class="option-item"
            :class="{ 'active-option': form.correctAnswer === option.label }"
          >
            <div class="option-label">{{ option.label }}.</div>
            <el-input
              v-model="option.content"
              placeholder="请输入选项内容"
              class="option-input"
            />
            <el-radio
              v-model="form.correctAnswer"
              :label="option.label"
              class="answer-radio"
            >设为答案</el-radio>
            <el-button
              v-if="form.options.length > 2"
              @click="removeOption(index)"
              type="danger"
              circle
              :icon="Minus"
              class="remove-btn"
            />
          </div>

          <div class="option-actions">
            <el-button
              @click="addOption"
              type="primary"
              :icon="Plus"
            >添加选项</el-button>
          </div>
        </template>

        <template v-else-if="questionType === '判断题'">
          <div class="judge-options">
            <el-radio-group v-model="form.correctAnswer">
              <el-radio label="T" size="large">正确</el-radio>
              <el-radio label="F" size="large">错误</el-radio>
            </el-radio-group>
          </div>
        </template>
      </div>
    </div>

    <!-- 批量导入模块 -->
    <div v-show="activeOperation === '批量导入'" class="batch-import">
      <el-alert type="info" show-icon>
        <template #title>
          <span class="batch-tip">请上传Excel文件（支持.xlsx格式）</span>
          <el-button type="primary" text>下载模板</el-button>
        </template>
      </el-alert>
      <el-upload
        class="upload-demo"
        drag
        action="#"
        accept=".xlsx"
        multiple
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>

    <!-- 智能导入模块 -->
    <div v-show="activeOperation === '智能导入'" class="smart-import">
      <el-alert type="warning" show-icon>
        智能导入功能开发中，敬请期待
      </el-alert>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleSubmit">立即提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Plus, Minus, UploadFilled } from '@element-plus/icons-vue'

const activeOperation = ref('单个添加')
const questionType = ref('选择题')

// 知识点数据结构
const knowledgeOptions = [
  {
    value: 'book1',
    label: '书一',
    children: [
      { value: 'chapter1', label: '章节一' },
      { value: 'chapter2', label: '章节二' },
      { value: 'chapter3', label: '章节三' }
    ]
  },
  {
    value: 'book2',
    label: '书二',
    children: [
      { value: 'chapter1', label: '章节一' },
      { value: 'chapter2', label: '章节二' }
    ]
  }
]

const form = reactive({
  knowledgePath: [],
  difficulty: 'medium',
  folder: 'root',
  stem: '',
  options: [
    { label: 'A', content: '' },
    { label: 'B', content: '' },
    { label: 'C', content: '' },
    { label: 'D', content: '' }
  ],
  correctAnswer: ''
})

// 选项标签生成器
const nextLabel = computed(() => {
  if (form.options.length === 0) return 'A'
  const lastCharCode = form.options[form.options.length - 1].label.charCodeAt(0)
  return String.fromCharCode(lastCharCode + 1)
})

// 添加选项
const addOption = () => {
  form.options.push({
    label: nextLabel.value,
    content: ''
  })
}

// 删除选项
const removeOption = (index) => {
  if (form.options.length <= 2) return
  const removedLabel = form.options[index].label
  form.options.splice(index, 1)

  if (form.correctAnswer === removedLabel) {
    form.correctAnswer = ''
  }
}

// 提交处理
const handleSubmit = () => {
  console.log('提交数据：', JSON.parse(JSON.stringify(form)))
}

// 重置表单
const handleReset = () => {
  form.knowledgePath = []
  form.difficulty = 'medium'
  form.folder = 'root'
  form.stem = ''
  form.options = [
    { label: 'A', content: '' },
    { label: 'B', content: '' },
    { label: 'C', content: '' },
    { label: 'D', content: '' }
  ]
  form.correctAnswer = ''
}
</script>

<style scoped>
.question-manager {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.operation-mode {
  margin-bottom: 30px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 20px;
}

.type-selector {
  margin: 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.metadata-form {
  margin: 20px 0;
}

.stem-editor {
  margin: 20px 0;
}

.answer-section {
  margin: 25px 0;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.option-item {
  display: flex;
  align-items: center;
  margin: 12px 0;
  gap: 15px;
  position: relative;
  padding: 12px 15px;
  transition: all 0.3s ease;
}

.active-option {
  background: #f0f7ff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(64,158,255,.1);
  border-left: 3px solid #409eff;
  padding-left: 8px;
}

.remove-btn {
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
}

.option-label {
  width: 30px;
  font-weight: 600;
  color: #409eff;
}

.option-actions {
  margin-top: 20px;
  border-top: 1px dashed #eee;
  padding-top: 15px;
}

.judge-options {
  padding: 15px;
  :deep(.el-radio) {
    margin-right: 30px;
  }
}

.batch-import {
  .batch-tip {
    margin-right: 15px;
  }
  .upload-demo {
    margin-top: 20px;
  }
}

.smart-import {
  text-align: center;
  padding: 50px 0;
}

.action-buttons {
  text-align: right;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}
</style>
